<template>
	<div class="inviterSearch">
		<div class="serch_box">
			<el-input v-model="merchName" placeholder="请输入商户名称" />
			<el-input v-model="merchPhone" placeholder="请输入联系电话" />
			<el-select v-model="statusOptionsValue" placeholder="请选择状态">
				<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<el-button type="primary" @click="serchBtn">搜索</el-button>
			<el-button type="primary" @click="resetBtn">重置</el-button>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			/* 搜索 */
			merchName: '',
			merchPhone: '',
			statusOptions: [
				{
					value: 0,
					label: '待同意'
				},
				{
					value: 1,
					label: '已同意'
				},
				{
					value: 2,
					label: '已拒绝'
				}
			],
			// 状态
			statusOptionsValue: ''
		};
	},
	methods: {
		/* 条件查询 */
		serchBtn() {
			console.log('出资方', this.stakeValue);
			const conditions = {
				merchName: this.merchName,
				merchPhone: this.merchPhone,
				statusOptionsValue: this.statusOptionsValue
			};
			this.$emit('conditions', conditions);
		},
		resetBtn() {
			this.cleanConditionsFun();
			const conditions = {
				merchName: this.merchName,
				merchPhone: this.merchPhone,
				statusOptionsValue: this.statusOptionsValue
			};
			this.$emit('conditions', conditions);
		},
		// 清空条件
		cleanConditionsFun() {
			this.merchName = '';
			this.merchPhone = '';
			this.statusOptionsValue = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.inviterSearch {
	.serch_box {
		width: 100%;
		overflow: hidden;
		margin: 20px;
		.el-input,
		.el-select {
			width: 250px;
			float: left;
			margin-right: 20px;
		}
	}
	.el-button {
		margin-left: 8px;
	}
}
</style>
